<template>
  <div class="page">
    <header class="header">欢迎，管理员</header>
      <div class="content">
        <table class="table">
          <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in dataList" :key="index">"
            <td>
              <span v-if="item.editing">{{item.name}}</span>
              <el-input v-else v-model="item.name" maxlength="100" show-word-limit></el-input>
            </td>
            <td>
              <span v-if="item.editing">{{item.age}}</span>
              <el-input v-else v-model="item.age" maxlength="100" show-word-limit></el-input>
            </td>
            <td>
              <span v-if="item.editing">{{item.address}}</span>
              <el-input v-else v-model="item.address" maxlength="100" show-word-limit></el-input>
            </td>
            <td>
              <button @click="editItem(item)" v-if="!item.editing">编辑</button>
              <button @click="editItem(item)" v-if="!item.editing">删除</button>
              <button @click="editItem(item)" v-if="!item.editing">保存</button>
              <button @click="editItem(item)" v-if="!item.editing">取消</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
  </div>
    </template>

<script>
  export default {
    data(){
      return{
        dataList:[{name:'张三',age:'25',address:'北京市'},
          {name:'李四',age:'12',address:'南宁市'}
        ]
      };
    },
methods:{
      editItem(index){
        this.$set(this.dataList,index,{
          ...this.dataList[index],
          editing: true
        });
      },
  deleteItem(index) {
    this.dataList.splice(index, 1);
  },
  saveItem(index){
        this.$set(this.dataList,index,{
          ...this.dataList[index],
          editing: false
        });
  },
  cancelEdit(index){
        this.dataList,[index].editing = false;
        }
  }
};
  </script>
<style >

</style>